// 讲座数据大屏图表配置

// 图表数据
const chartData = {
    lectureTypes: [
        { name: '汉服形制讲解', value: 108, percentage: 32.9, popularity: 4.8 },
        { name: '汉服制作工艺', value: 85, percentage: 25.9, popularity: 4.9 },
        { name: '汉服穿搭技巧', value: 62, percentage: 18.9, popularity: 4.7 },
        { name: '汉服历史文化', value: 73, percentage: 22.3, popularity: 4.6 }
    ],
    topLectures: [
        { name: '明制汉服的演变与发展', speaker: '张教授', participants: 2580 },
        { name: '汉服制作工艺大师班', speaker: '李师傅', participants: 1860 },
        { name: '唐制汉服复原与创新', speaker: '王博士', participants: 1540 },
        { name: '汉服配饰文化讲座', speaker: '陈老师', participants: 1230 },
        { name: '汉服摄影技巧分享会', speaker: '刘摄影师', participants: 980 }
    ]
};

// 初始化讲座类型分布图表
function initLectureTypesChart() {
    const chartDom = document.getElementById('lectureTypesChart');
    const myChart = echarts.init(chartDom);
    
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: function(params) {
                const data = chartData.lectureTypes[params[0].dataIndex];
                return `${data.name}\n` +
                       `数量: ${data.value} 场\n` +
                       `占比: ${data.percentage}%\n` +
                       `受欢迎度: ${data.popularity}/5.0`;
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            axisLabel: {
                color: '#ffffff'
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.1)'
                }
            }
        },
        yAxis: {
            type: 'category',
            data: chartData.lectureTypes.map(item => item.name),
            axisLabel: {
                color: '#ffffff'
            }
        },
        series: [{
            name: '讲座数量',
            type: 'bar',
            data: chartData.lectureTypes.map(item => item.value),
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    { offset: 0, color: '#60a5fa' },
                    { offset: 1, color: '#3b82f6' }
                ])
            },
            label: {
                show: true,
                position: 'right',
                color: '#ffffff',
                formatter: '{c} 场'
            },
            emphasis: {
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        { offset: 0, color: '#93c5fd' },
                        { offset: 1, color: '#60a5fa' }
                    ])
                }
            }
        }]
    };
    
    myChart.setOption(option);
    
    // 响应式调整
    window.addEventListener('resize', function() {
        myChart.resize();
    });
    
    return myChart;
}

// 初始化热门讲座榜单图表
function initTopLecturesChart() {
    const chartDom = document.getElementById('topLecturesChart');
    const myChart = echarts.init(chartDom);
    
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: function(params) {
                const data = chartData.topLectures[params[0].dataIndex];
                return `${data.name}\n` +
                       `主讲人: ${data.speaker}\n` +
                       `参与人数: ${data.participants.toLocaleString()} 人`;
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            axisLabel: {
                color: '#ffffff',
                formatter: function(value) {
                    return (value / 1000) + 'k';
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.1)'
                }
            }
        },
        yAxis: {
            type: 'category',
            data: chartData.topLectures.map(item => item.name),
            axisLabel: {
                color: '#ffffff',
                fontSize: 12
            }
        },
        series: [{
            name: '参与人数',
            type: 'bar',
            data: chartData.topLectures.map(item => item.participants),
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    { offset: 0, color: '#2563eb' },
                    { offset: 1, color: '#1e40af' }
                ])
            },
            label: {
                show: true,
                position: 'right',
                color: '#ffffff',
                formatter: function(params) {
                    return params.value.toLocaleString() + ' 人';
                }
            },
            emphasis: {
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        { offset: 0, color: '#3b82f6' },
                        { offset: 1, color: '#2563eb' }
                    ])
                }
            }
        }]
    };
    
    myChart.setOption(option);
    
    // 响应式调整
    window.addEventListener('resize', function() {
        myChart.resize();
    });
    
    return myChart;
}

// 更新核心指标
function updateIndicators(period) {
    // 这里可以根据不同时间周期更新指标数据
    // 目前使用模拟数据
    const indicators = document.querySelectorAll('.indicator-card .value');
    const changes = document.querySelectorAll('.indicator-card .change');
    
    // 模拟不同时间周期的数据
    const periodData = {
        '30': [
            { value: '328 场', change: '同比增长 42.8%' },
            { value: '12.5 万', change: '同比增长 38.5%' },
            { value: '381 人', change: '同比增长 8.2%' },
            { value: '568 万', change: '同比增长 65.3%' }
        ],
        '90': [
            { value: '956 场', change: '同比增长 45.2%' },
            { value: '35.8 万', change: '同比增长 41.3%' },
            { value: '374 人', change: '同比增长 7.8%' },
            { value: '1680 万', change: '同比增长 68.5%' }
        ],
        '365': [
            { value: '3650 场', change: '同比增长 52.7%' },
            { value: '135.2 万', change: '同比增长 48.9%' },
            { value: '370 人', change: '同比增长 9.1%' },
            { value: '6850 万', change: '同比增长 72.3%' }
        ]
    };
    
    const data = periodData[period];
    indicators.forEach((indicator, index) => {
        indicator.textContent = data[index].value;
    });
    changes.forEach((change, index) => {
        change.textContent = data[index].change;
    });
}

// 更新图表数据
function updateCharts(period) {
    // 这里可以根据不同时间周期更新图表数据
    // 目前使用模拟数据，实际应用中可以根据需要扩展
}

// 页面加载完成后初始化
window.addEventListener('DOMContentLoaded', function() {
    // 初始化图表
    const typesChart = initLectureTypesChart();
    const topChart = initTopLecturesChart();
    
    // 时间周期切换事件
    document.querySelectorAll('.time-filter span').forEach(span => {
        span.addEventListener('click', function() {
            // 移除所有active类
            document.querySelectorAll('.time-filter span').forEach(s => s.classList.remove('active'));
            // 添加当前active类
            this.classList.add('active');
            
            const period = this.getAttribute('data-period');
            updateIndicators(period);
            updateCharts(period);
            
            // 重新渲染图表
            typesChart.setOption(typesChart.getOption());
            topChart.setOption(topChart.getOption());
        });
    });
    
    // 默认显示30天数据
    updateIndicators('30');
});